<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ChaosGenius Alerts Dashboard</title>

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://unpkg.com/simple-datatables@3.2.0/dist/style.css" rel="stylesheet" type="text/css">
</head>

<body class="parent-container bg-white">
    <div class="container">
        <div class="logo-container">
            <a href="{{ cg_dashboard_link }}"><img src="{{ url_for('static', filename='images/logo.svg') }}" alt="ChaosGenius Logo"></a>
        </div>

        <div class="header-container">
        <h1 class="header-text">Alerts Dashboard</h1>
        <button type="button" class="download-button" onclick="downloadCSV()">Download CSV</button>
    </div>

        <!-- Tabs -->
    <ul id="tabs" class="inline-flex pt-2 px-1 w-full border-b">
        <li class="bg-white active-text px-4 py-2 border-active -mb-px"><a id="default-tab" href="#anomaly-alerts">Anomaly Alerts</a></li>
        {% if EVENT_ALERTS_ENABLED %}
        <li class="px-4 py-2"><a href="#event-alerts">Event Alerts</a></li>
        {% endif %}
    </ul>

        <div class="search-container">
            <div class="search-box-container">
                <label class="search-box-label">Alert Configuration</label>
            <select id="alert-config-select" multiple class="search-box">
            </select>
           </div>
           <div class="search-box-container">
           <label class="search-box-label">Recipient Email</label>
            <select id="email-select" multiple class="search-box">
            </select>
            </div>
            <div class="search-box-container">
                <label class="search-box-label">KPI Names</label>
            <select id="kpi-select" multiple class="search-box">
            </select>   
            </div>
            <div class="search-box-container">
                <label class="search-box-label">Select Dates</label>
            <select id="date-select" multiple class="search-box">
            </select>   
            </div>   
        </div>
        <div class="checkbox-container">
        <div class="toggle colour">
            <label class="checkbox-label">Show subdimensions:  </label><input id="subdims-check" class="toggle-checkbox hidden" type="checkbox">
            <label for="subdims-check" class="toggle-label inline-block w-12 h-6 rounded-full transition-color duration-150 ease-out"></label>
        </div>
        <div class="toggle colour">
            <label class="checkbox-label">Slack alerts only:  </label><input id="slack-check" class="toggle-checkbox hidden" type="checkbox">
           <label for="slack-check" class="toggle-label inline-block w-12 h-6 rounded-full transition-color duration-150 ease-out"></label>
        </div>
    </div>
        
    <div id="tab-contents">
        <div id="anomaly-alerts">
            <div class="flex flex-col">
                <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                        <div class="shadow overflow-hidden border-b border-gray-200 bg-gray-100 sm:rounded-2xl">
                            <table class="min-w-full divide-y divide-gray-200 table-fixed w-full" id="tasktable-anomaly">
                                <thead class="bg-gray-900">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Alert Name (ID)
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            KPI Name (ID)
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Alert ID
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            KPI ID
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Dimension
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle desc">
                                            Timestamp
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Previous Value
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle desc">
                                            Actual Value
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Expected Value
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Users
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Channel
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Date
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Expected Range
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle desc">
                                            Severity Score
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Alert Description
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {% if EVENT_ALERTS_ENABLED %}
        <div id="event-alerts" class="hidden">
            <div class="flex flex-col">
                <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                        <div class="shadow overflow-hidden border-b border-gray-200 bg-gray-100 sm:rounded-2xl">
                            <table class="min-w-full divide-y divide-gray-200" id="tasktable-event">
                                <thead class="bg-gray-900">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Alert Name (ID)
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Alert ID
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Alert Message
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Timestamp
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Channel
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider align-middle">
                                            Users
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <style>
        .dataTableAnomaly-table > thead > tr > th {
            vertical-align: middle;
        }
    </style>

    <style>
        .dataTableEvent-table > thead > tr > th {
            vertical-align: middle;
        }
    </style>

    <style>
        .grow {
            flex-grow: 1;
        }
    </style>

    <style>
    .toggle-label {
      position: relative;
    }

    .parent-container{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        
    }

    .download-button {
        width: 160px;
        height:40px;
        border-radius: 10px;
        background-color: #60CA9A;
        color: #FFFFFF
    }

    .checkbox-label {
        margin-right: 10px;
    }
    .active-text {
        color: #9ae6b4;
    }
    .checkbox-container {
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
        height: 60px;
    }

    .logo-container{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
    }
 
    .toggle-checkbox.hidden {
        display: none;
    }

    .hidden {
        display: none !important;
    }

    .search-container{
        margin-top: 20px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .search-box-container {
        display: flex;
        width:23%;
        flex-direction: column;
        justify-content: space-evenly;
        height: 80px;
    }
    .search-box {
        height: 48px;
    }

    .search-box-label {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
    }
    .ts-control {
        height: 100%;
    }
    .header-container{
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        margin-top: 20px;
        justify-content: space-between;  
    }
    .header-text {
        font-size: 29px;
        font-weight: 500;
        line-height: 36px;
    }
    .toggle {
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        /* align-items: baseline; */
    }
    .dataTable-sorter.desc:after {
        content: '\2193';
        color: #0597F2;
        position: static!important;
        right: 0px!important;
        opacity: 1!important;
    }
    .toggle-label:before {
      position: absolute;
      top: 0.125rem;
      left: 0.125rem;
      display: block;
      content: "";
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 9999%;
      background-color: white;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 40%;
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23a0aec0" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
      transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1);
      transform: translateX(0);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .toggle-checkbox:checked + .toggle-label:before {
      transform: translateX(1.5rem);
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23a0aec0" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    }

    .toggle.slim .toggle-label:before {
      top: -0.15rem;
      left: 0;
    }
    .toggle.slim .toggle-checkbox:checked + .toggle-label:before {
      transform: translateX(1.75rem);
    }
    .toggle.colour .toggle-label {
      background-color: #feb2b2;
    }
    .toggle.colour .toggle-checkbox:checked + .toggle-label {
      background-color: #60CA9A;
    }

    .border-active{
        border-bottom: 2px solid #60CA9A;
    }
    </style>

    <!-- Script for displaying anomaly alerts and event alerts -->
    <script src="https://unpkg.com/simple-datatables@3.2.0/dist/umd/simple-datatables.js" type="text/javascript"></script>
    <script>
        const dataAnomaly = [
            {% for point in anomaly_alerts_data %}
                [ "<a href=\"{{ point.alert_link() }}\" style=\"text-decoration: underline;\">{{ point.alert_name }}</a> ({{ point.alert_id }})",
                  "<a href=\"{{ point.kpi_link() }}\" style=\"text-decoration: underline;\">{{ point.kpi_name }}</a> ({{ point.kpi_id }})",
                  "{{ point.alert_id }}",
                  "{{ point.kpi_id }}",
                  "{{ point.series_type_name }}",
                  "{{ point.readable_data_timestamp }}",
                  "{{ point.previous_value if point.previous_value is not none else "-" }}",
                  "{{ point.y }}",
                  "{{ point.yhat if point.yhat is not none else "N/A" }}",
                  [
                      {% for email in (point.alert_channel_conf or []) %}
                      "{{ email }}",
                      {% endfor %}
                  ],
                  "{{ point.alert_channel }}",
                  "{{ point.date_only }}",
                  "{{ point.expected_range }}",
                  `{% if point.severity >= 65 %}
                        <span style='color:#FF2C1F;font-weight: light' class="severity"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" style="display: inline!important;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
                    {% elif point.severity >= 25 %}
                        <span style='color:#F57C00;font-weight: light' class="severity"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" style="display: inline!important;" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
                    {% else %}
                        <span style='font-weight: light' class="severity"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" style="display: inline!important;" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
                    {% endif %}
                  {{ point.severity }}</span>`,
                  {% if point.percent_change is string %}
                    "{{ point.percent_change_formatted }}",
                  {% else %}
                    {% if point.percent_change >= 0 %}
                        "<span style=\"color: rgb(96, 202, 154); font-weight: 600;\">{{ point.percent_change_formatted }} higher</span> than expected",
                    {% else %}
                        "<span style=\"color: #FF2C1F; font-weight: 600;\">{{ point.percent_change_formatted }} lower</span> than expected",
                    {% endif %}
                  {% endif %}
                ],
            {% endfor %}
        ];

        const dataTables = [];

        const dataTableAnomaly = new simpleDatatables.DataTable("#tasktable-anomaly", {
            data: {
                data: dataAnomaly,
            }
        });
        dataTableAnomaly.origData = dataAnomaly;
        // hide user emails and alert channel columns
        dataTableAnomaly.alertColIndex = 0;
        dataTableAnomaly.kpiColIndex = 1;
        dataTableAnomaly.alertIdColIndex = 2;
        dataTableAnomaly.kpiIdColIndex = 3;
        dataTableAnomaly.emailColIndex = 9;
        dataTableAnomaly.channelColIndex = 10;
        dataTableAnomaly.dateOnlyColIndex = 11;
        dataTableAnomaly.valueColIndex = 7;
        dataTableAnomaly.previousValueColIndex = 6;
        dataTableAnomaly.expectedValueColIndex = 8;
        dataTableAnomaly.dimensionColIndex = 4;
        dataTableAnomaly.timeStampColIndex = 5;
        dataTableAnomaly.expectedRangeColIndex = 12;
        dataTableAnomaly.severityColIndex = 13;
        dataTableAnomaly.alertDescColIndex = 14;

        dataTableAnomaly.on('datatable.init', function(args) {
            dataTableAnomaly.head.getElementsByTagName('th')[dataTableAnomaly.valueColIndex].getElementsByTagName('a')[0].classList.add('desc');
            dataTableAnomaly.head.getElementsByTagName('th')[dataTableAnomaly.previousValueColIndex].getElementsByTagName('a')[0].classList.add('desc');
            dataTableAnomaly.head.getElementsByTagName('th')[dataTableAnomaly.expectedValueColIndex].getElementsByTagName('a')[0].classList.add('desc');
            dataTableAnomaly.head.getElementsByTagName('th')[dataTableAnomaly.severityColIndex].getElementsByTagName('a')[0].classList.add('desc');
            dataTableAnomaly.head.getElementsByTagName('th')[dataTableAnomaly.timeStampColIndex].getElementsByTagName('a')[0].classList.add('desc');

            dataTableAnomaly.columns().hide([
                dataTableAnomaly.alertIdColIndex,
                dataTableAnomaly.kpiIdColIndex,
                dataTableAnomaly.emailColIndex,
                dataTableAnomaly.channelColIndex,
                dataTableAnomaly.dateOnlyColIndex,
            ]);
            if ((new URL(window.location)).searchParams.get("subdims") != "true") {
                dataTableAnomaly.columns().hide([dataTableAnomaly.dimensionColIndex]);
            }
        });
        dataTables.push(dataTableAnomaly);

        {% if EVENT_ALERTS_ENABLED %}
        const dataEvent = [
            {% for triggered_alert in event_alerts_data %}
            [
                "{{ triggered_alert.alert_name }} ({{ triggered_alert.alert_conf_id }})",
                "{{ triggered_alert.alert_conf_id }}",
                "{{ triggered_alert.alert_message }}",
                "{{ triggered_alert.created_at }}",
                "{{ triggered_alert.alert_channel }}",
                [
                    {% for email in (triggered_alert.alert_channel_conf or []) %}
                    "{{ email }}",
                    {% endfor %}
                ],
                "{{ triggered_alert.date_only }}"
            ],
            {% endfor %}
        ]
        const dataTableEvent = new simpleDatatables.DataTable("#tasktable-event", {
            data: {
                data: dataEvent,
            }
        });
        dataTableEvent.origData = dataEvent;
        dataTableEvent.alertColIndex = 0;
        dataTableEvent.alertIdColIndex = 1;
        dataTableEvent.emailColIndex = 5;
        dataTableEvent.channelColIndex = 4;
        dataTableEvent.dateOnlyColIndex = 6;
        dataTableEvent.columns().hide([
            dataTableEvent.alertIdColIndex,
            dataTableEvent.emailColIndex,
            dataTableEvent.channelColIndex,
            dataTableEvent.dateOnlyColIndex
        ]);
        dataTables.push(dataTableEvent);
        {% endif %}

        let currentTable = dataTables[0];
    </script>

    <!-- Script to download CSV -->
    <script type="text/javascript">
        function downloadCSV() {
            // Variable to store the final csv data
            let csv_data = [];

            const headerRow = document.createElement("tr");
            const headers = currentTable.headings;
            for(let i = 0; i < headers.length; ++i) {
                headerRow.appendChild(headers[i].cloneNode(true));
            }

            // Get each row data
            function getRows() {
                let rows = null;
                if (currentTable.searching) {
                    const searchedRows = new Set(currentTable.searchData);
                    rows = currentTable.data.filter((_, index) => searchedRows.has(index));
                } else {
                    rows = currentTable.data;
                }

                return ([headerRow]).concat(rows);
            }

            const rows = getRows();

            for (let i = 0; i < rows.length; i++) {

                // Get each column data
                const cols = rows[i].querySelectorAll("td,th");

                // Stores each csv row data
                let csvrow = [];
                for (let j = 0; j < cols.length; j++) {
                    if (
                      j == currentTable.emailColIndex ||
                      j == currentTable.dateOnlyColIndex ||
                      j == currentTable.alertIdColIndex ||
                      j == currentTable.kpiIdColIndex
                    ) {
                      continue;
                    }

                    // ignore severity "!"
                    if (cols[j].lastChild && cols[j].lastChild.classList && cols[j].lastChild.classList.contains("severity")) {
                        csvrow.push(cols[j].lastChild.lastChild.textContent.trim());
                    } else {
                        // Get the text data of each cell
                        // of a row and push it to csvrow
                        csvrow.push(cols[j].innerText.trim());
                    }
                }

                // Combine each column value with comma
                csv_data.push(csvrow.join(","));
            }

            // Combine each row data with new line character
            csv_data = csv_data.join('\n');

            // Create CSV file object and feed
            // our csv_data into it
            const CSVFile = new Blob([csv_data], {
                type: "text/csv"
            });

            // Create to temporary link to initiate
            // download process
            let temp_link = document.createElement("a");

            // Download csv file
            temp_link.download = "ChaosGenius_alert_digest_export_" + (new Date()).toISOString().slice(0, 10)
 + ".csv";
            const url = window.URL.createObjectURL(CSVFile);
            temp_link.href = url;

            // This link should not be displayed
            temp_link.style.display = "none";
            document.body.appendChild(temp_link);

            // Automatically click the link to
            // trigger download
            temp_link.click();
            document.body.removeChild(temp_link);
        }
    </script>

    <!-- script for anomaly and event alert tabs -->
    <script>
        let tabsContainer = document.querySelector("#tabs");

        let tabTogglers = tabsContainer.querySelectorAll("#tabs a");

        tabTogglers.forEach(function(toggler) {
          toggler.addEventListener("click", function(e) {
            e.preventDefault();

            let tabName = this.getAttribute("href");
            console.log("switching to tab", tabName);

            // hide "Show subdims" and "KPI names" filter on event alert tab
            const kpiFilter = document.querySelector(".search-box-container #kpi-select").parentElement;
            const showSubdims = document.querySelector(".toggle #subdims-check").parentElement;
            if (tabName === "#event-alerts") {
                kpiFilter.classList.add("hidden");
                showSubdims.classList.add("hidden");
            } else if (tabName === "#anomaly-alerts") {
                kpiFilter.classList.remove("hidden");
                showSubdims.classList.remove("hidden");
            }

            let tabContents = document.getElementById("tab-contents");

            for (let i = 0; i < tabContents.children.length; i++) {
              tabTogglers[i].parentElement.classList.remove("border-active","-mb-px", "bg-white", "active-text");
              tabContents.children[i].classList.remove("hidden");
              if ("#" + tabContents.children[i].id === tabName) {
                currentTable = dataTables[i];
                initUserEmails(currentTable);
                initAlertConfigs(currentTable);
                initKpiSelect(currentTable);
                initDateSelect(currentTable);
                continue;
              }
              tabContents.children[i].classList.add("hidden");
            }
            e.target.parentElement.classList.add("border-active", "-mb-px", "bg-white", "active-text");
          });
        });

    </script>

    <!-- Subdimensional toggle button -->
    <script>
        const subdimsCheck = document.getElementById("subdims-check");

        function initSubdimsCheck() {
            let params = new URLSearchParams(location.search);

            if (params.get("subdims") == "true") {
                subdimsCheck.checked = true;
            }
        }

        initSubdimsCheck();

        subdimsCheck.addEventListener("click", () => {
            const parser = new URL(window.location);
            if (subdimsCheck.checked) {
                parser.searchParams.set("subdims", true);
            } else {
                parser.searchParams.set("subdims", false);
            }
            window.location = parser.href;
        });
    </script>

    <!-- Script for various filter functions -->
    <script type="text/javascript">
        const filters = new Map();

        function addFilter(name, cb) {
            filters.set(name, cb);
        }

        function removeFilter(name) {
            filters.delete(name);
        }

        function applyFilters(table) {
            let newRows = table.origData;

            for (const [filterName, cb] of filters) {
                newRows = newRows.filter(cb);
            }

            table.search("");

            table.rows().remove("all");
            // deepcopy new rows and sent to library
            // - needed since the library may modify the passed object
            table.rows().add(JSON.parse(JSON.stringify(newRows)));

            table.search(table.wrapper.querySelector(".dataTable-input").value);
        }
    </script>


    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.0.0/dist/css/tom-select.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.0.0/dist/js/tom-select.popular.min.js"></script>

    <!-- Script for email selection dropdown -->
    <script>
        const emailSelect = new TomSelect("#email-select", {
            items: [],
            placeholder: "Select Recipient Emails",
            plugins: {
                remove_button:{
                    title: "Remove this email",
                }
            },
        });
    </script>

    <!-- Script for alert selection dropdown-->
    <script>
        const alertSelect = new TomSelect("#alert-config-select", {
            items: ["All"],
            placeholder: "Select Alert Configurations",
            plugins: {
                remove_button:{
                    title: "Remove this alert configuration",
                }
            },
        });
    </script>

    <!-- Script for KPI selection dropdown -->
    <script>
        const kpiSelect = new TomSelect("#kpi-select", {
            items: ["All"],
            placeholder: "Select KPI Names",
            plugins: {
                remove_button:{
                    title: "Remove this KPI",
                }
            },
        });
    </script>

    <!-- Script for Date selection dropdown -->
    <script>
        const dateSelect = new TomSelect("#date-select", {
            items: ["All"],
            placeholder: "Select Dates",
            plugins: {
                remove_button:{
                    title: "Remove this Date",
                }
            },
        });
    </script>

    <!-- Script for filtering helpers -->
    <script type="text/javascript">
        function stripTags(str) {
            // render it into a div and extract text
            // removes all html tags
            const tempDiv = document.createElement("div");
            tempDiv.innerHTML = str;
            const textOnly = tempDiv.textContent || tempDiv.innerText || "";
            return textOnly;
        }
    </script>

    <!-- Script for filtering search according to email selected-->
    <script type="text/javascript">
        function initUserEmails(currentTable) {
            const userEmails = new Set();

            currentTable.origData.forEach(datapoint => {
                datapoint[currentTable.emailColIndex].forEach(email => {
                    userEmails.add(email);
                })
            });

            emailSelect.clear(false);
            emailSelect.clearOptions();
            emailSelect.addOptions(Array.from(userEmails).map((email) => {
                return {value: email, text: email};
            }), false);
            emailSelect.refreshOptions(false);
            emailSelect.refreshItems();

            return userEmails;
        }

        let userEmails = initUserEmails(currentTable);

        const dropdown = document.getElementById("email-select");
        dropdown.addEventListener("input", () => {
            let selected = Array.from(dropdown.options).filter(option => option.selected).map(option => option.value);

            if (selected.length !== 0) {
                const selectedSet = new Set(selected);
                addFilter("email", row => {
                    const intersection = row[currentTable.emailColIndex].filter(email => selectedSet.has(email));
                    return intersection.length > 0;
                });
            } else {
                removeFilter("email");
            }

            applyFilters(currentTable);
        });
    </script>

    <!-- Script for filtering search according to alert configuration selected-->
    <script type="text/javascript">
        const dropdownAlerts = document.getElementById("alert-config-select");
        const alertConfigSeparator = ",";

        function initAlertConfigs(currentTable) {
            const alertConfigs = new Map();

            currentTable.origData.forEach(datapoint => {
                alertConfigs.set(
                    datapoint[currentTable.alertIdColIndex],
                    stripTags(datapoint[currentTable.alertColIndex])
                );
            });

            alertSelect.clear(false);
            alertSelect.clearOptions();
            alertSelect.addOptions(
                Array.
                    from(alertConfigs).
                    map(([alertId, alertName]) => {
                        return {value: alertId, text: alertName};
                    }),
                false
            );
            alertSelect.refreshOptions(false);
            alertSelect.refreshItems();

            // get data from URL params
            const params = new URLSearchParams(window.location.search);
            if (params.get("alert")) {
                const alert_str = params.get("alert");
                const alerts = alert_str.split(alertConfigSeparator);
                for (const alert of alerts) {
                    alertSelect.addItem(alert, false);
                }
            }
            updateAlertConfigs();

            return alertConfigs;
        }

        let alertConfigs = initAlertConfigs(currentTable);

        function updateAlertConfigs() {
            const selected = Array
                .from(dropdownAlerts.options)
                .filter(option => option.selected)
                .map(option => option.value);
            const selectedSet = new Set(selected);
            const urlParser = new URL(window.location);

            if(selectedSet.size > 0){
                addFilter("alert-name", row => {
                    return selectedSet.has(row[currentTable.alertIdColIndex])
                });
                urlParser.searchParams.set("alert", Array.from(selectedSet).join(alertConfigSeparator));
            }
            else{
                removeFilter("alert-name");
                urlParser.searchParams.delete("alert");
            }

            // set URL params
            window.history.replaceState({}, null, urlParser.href);

            applyFilters(currentTable);
        }
        dropdownAlerts.addEventListener("input", () => {
            updateAlertConfigs();
        });
    </script>

    <!-- Script for filtering search accoring to KPI configuration selected-->
    <script type="text/javascript">
        function initKpiSelect(currentTable) {
            const kpiNames = new Map();

            currentTable.origData.forEach(datapoint => {
                kpiNames.set(
                    datapoint[currentTable.kpiIdColIndex],
                    stripTags(datapoint[currentTable.kpiColIndex])
                );
            });

            kpiSelect.clear(false);
            kpiSelect.clearOptions();
            kpiSelect.addOptions(
                Array
                    .from(kpiNames)
                    .map(([kpiId, kpiName]) => {
                        return {value: kpiId, text: kpiName};
                    }),
                false
            );
            kpiSelect.refreshOptions(false);
            kpiSelect.refreshItems();

            return kpiNames;
        }

        let kpiNames = initKpiSelect(currentTable);
        const dropdownKpi = document.getElementById("kpi-select");
        dropdownKpi.addEventListener("input", () => {
            const selected = Array.from(dropdownKpi.options).filter(option => option.selected).map(option => option.value);
            const selectedSet = new Set(selected);

            if(selectedSet.size > 0){
                addFilter("kpi-name", row => {
                    return selectedSet.has(row[currentTable.kpiIdColIndex])
                });
            }
            else{
                removeFilter("kpi-name");
            }

            applyFilters(currentTable);
        });
    </script>

    <!-- Script for filtering search accoring to Date configuration selected-->
    <script type="text/javascript">
        const dropdownDates = document.getElementById("date-select");

        function initDateSelect(currentTable) {
            const Dates = new Set();

            currentTable.origData.forEach(datapoint => {
                Dates.add(datapoint[currentTable.dateOnlyColIndex]);
            });

            dateSelect.clear(false);
            dateSelect.clearOptions();
            dateSelect.addOptions(Array.from(Dates).map((date) => {
                return {value: date, text: date};
            }), false);
            dateSelect.refreshOptions(false);
            dateSelect.refreshItems();

            // get data from URL params
            const params = new URLSearchParams(window.location.search);
            if (params.get("date")) {
                const date_str = params.get("date");
                const dates = date_str.split(",");
                for (const date of dates) {
                    dateSelect.addItem(date, false);
                }
            }
            updateDateSelect();

            return Dates;
        }

        function updateDateSelect() {
            const selected = Array.from(dropdownDates.options).filter(option => option.selected).map(option => option.value);
            const selectedSet = new Set(selected);
            const urlParser = new URL(window.location);

            if(selectedSet.size > 0){
                addFilter("date", row => {
                    return selectedSet.has(row[currentTable.dateOnlyColIndex])
                });
                urlParser.searchParams.set("date", Array.from(selectedSet).join(","));
            }
            else{
                removeFilter("date");
                urlParser.searchParams.delete("date");
            }

            // set URL params
            window.history.replaceState({}, null, urlParser.href);

            applyFilters(currentTable);
        }

        let Dates = initDateSelect(currentTable);
        dropdownDates.addEventListener("input", () => {
            updateDateSelect();
        });
    </script>

    <!-- Script to show alerts sent using Slack as the medium-->
    <script type="text/javascript">
        document.getElementById("slack-check").addEventListener("input", (e) => {
            const checked = e.target.checked;

            if (checked) {
                addFilter("slack", row => {
                    return row[currentTable.channelColIndex] == "slack";
                });
            } else {
                removeFilter("slack");
            }
            applyFilters(currentTable);
        });
    </script>
    </div>
</body>

</html>
